<template>
	<view class="pr">
		<image src="/static/img/task/page_bg.png" class="w-max pa top0 left0" mode="widthFix"></image>
		<u-navbar :is-back="false" :border-bottom="false" title="今日任务" titleColor="#fff" title-bold :is-fixed="false"
			:background="{background:'#fff0'}">
			<!-- <view class="pr20 pl20 flex w-max row-right">
				<image src="/static/img/task/top-right-button2.png" class="w46 h46 ml30" mode=""></image>
				<image src="/static/img/task/top-right-button1.png" class="w46 h46 ml30" mode=""></image>
			</view> -->
		</u-navbar>
		<view class="p20 pr">
			<view class="radius12 bg-fff p4 pt20 pb20 flex flex-wrap">
				<view class="p10" @click="current=index" v-for="(item,index) in calendar" :key="index">
					<view :class="index==current?'sel1':'sel0'"
						class="radius12 w120 h156 bg-f8f flex-col col-center row-around ">
						<view class="fs24 h34 it1">{{item.week}}</view>
						<view class="fs30 fw-w h42 it2">{{item.day}}</view>
						<view class="w100 h40 radius6 flex row-center fs20 it3">{{item.count}}待服务</view>
					</view>
				</view>
			</view>
			<orderInfo :list="list" sign />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				calendar: '',
				current: 0,
				list:[]
			};
		},
		watch: {
			current(e) {
				this.getList()
			},
		},
		onLoad() {
			this.get_calendar()
		},
		onReachBottom() {
			this.getList('down')
		},
		methods: {
			get_calendar() {
				this.$request('/master/task/index').then(res => {
					this.calendar = res.data
					this.getList()
				})
			},
			getList(e) {
				e == 'down' ? this.page++ : this.page = 1
				let params = {
					page: this.page,
					date: this.calendar?. [this.current]?.date || ''
				}
				this.$request('/master/task/lists', params).then(res => {
					let list = res.data.data
					e == 'down' ? this.data.push(...list) : this.list = list
				})
			},
		}
	}
</script>

<style lang="scss">
	.sel1 {
		border: 1rpx solid #FF7A50;
		color: $fs;

		.it3 {
			color: #fff;
			background-color: $fs;
		}
	}

	.sel0 {
		.it1 {
			color: #666;
		}

		.it2 {
			color: #232323;
		}

		.it3 {
			color: #cfcfcf;
			background-color: #fff;
		}
	}
</style>
